<template>
    <div class="registeradd" v-if="info">
        <div class = 'main'>
            <p class="title">预约挂号分时段排班{{littleTitle}}</p>
            <Row class="box padding-t">
                <Col :xs="24" :md="3">
                    <b>{{info.hospitalName}}</b>
                </Col>
                <Col :xs="24" :md="3">
                    <b>{{info.deptName}}</b>
                </Col>
                <Col :xs="24" :md="2">
                    <b>{{info.doctorName}}</b>
                </Col>
                <Col :xs="24" :md="3">
                    <!-- {{info.address}} -->
                </Col>
            </Row>
            <br>
            <Row class="bordered">
                <Col class="text-align-c borderRight" :xs="24" :md="3">
                    <b>就诊地址</b>
                </Col>
                <Col class="padding-l" :xs="24" :md="21">{{info.address}}</Col>
            </Row>
            <Row class="bordered">
                <Col class="text-align-c borderRight" :xs="24" :md="3">
                    <b>门诊类型</b>
                </Col>
                <Col class="padding-l" :xs="24" :md="21">{{info.outpatientType}}</Col>
            </Row>
            <Row class="bordered">
                <Col class="text-align-c" align="middle" :xs="24" :md="3">
                    <b>门诊时间</b>
                </Col>
                <Col class="padding-l padding-b padding-t borderLeft" :xs="24" :md="21">
                    <Row>
                        <Col :xs="2">&nbsp;</Col>
                        <Col :xs="3">&nbsp;</Col>
                        <Col :xs="2">星期一</Col>
                        <Col :xs="2">星期二</Col>
                        <Col :xs="2">星期三</Col>
                        <Col :xs="2">星期四</Col>
                        <Col :xs="2">星期五</Col>
                        <Col :xs="2">星期六</Col>
                        <Col :xs="2">星期日</Col>
                    </Row>
                    <Row v-for="(item,index) of upList" :key="index">
                        <Col :xs="2">
                            <span v-if="index+1 == 1">
                                上午
                            </span>
                            <span v-else>&nbsp;</span>
                        </Col>
                        <Col :xs="3">
                            <TimePicker
                                :open="false"
                                :value="item[0]"
                                format="HH:mm"
                                type="timerange"
                                :editable="false"
                            >
                                <a href="javascript:void(0)" @click="upClick(index)">
                                    <Icon type="ios-clock-outline"></Icon>
                                    <template v-if="item[0][0] === '' || item[0][1] === ''">选择时间段</template>
                                    <template v-else>{{ item[0][0]+'-'+item[0][1] }}</template>
                                </a>
                            </TimePicker>
                        </Col>
                        <Col :xs="2">
                            <InputNumber v-model="item[1]" disabled></InputNumber>
                        </Col>
                        <Col :xs="2">
                            <InputNumber v-model="item[2]" disabled></InputNumber>
                        </Col>
                        <Col :xs="2">
                            <InputNumber v-model="item[3]" disabled></InputNumber>
                        </Col>
                        <Col :xs="2">
                            <InputNumber v-model="item[4]" disabled></InputNumber>
                        </Col>
                        <Col :xs="2">
                            <InputNumber v-model="item[5]" disabled></InputNumber>
                        </Col>
                        <Col :xs="2">
                            <InputNumber v-model="item[6]" disabled></InputNumber>
                        </Col>
                        <Col :xs="2">
                            <InputNumber v-model="item[7]" disabled></InputNumber>
                        </Col>
                    </Row>
                    <br>
                    <Row v-for="(item,index) of dnList" :key="index">
                        <Col :xs="2">
                            <span v-if="index+1 == 1">
                                下午
                            </span>
                            <span v-else>&nbsp;</span>
                        </Col>
                        <Col :xs="3">
                            <TimePicker
                                :open="false"
                                :value="item[0]"
                                format="HH:mm"
                                type="timerange"
                                :clearable="false"
                                :confirm="true"
                                :editable="false"
                            >
                                <a href="javascript:void(0)">
                                    <Icon type="ios-clock-outline"></Icon>
                                    <template v-if="item[0][0] === '' || item[0][1] === ''">选择时间段</template>
                                    <template v-else>{{ item[0][0]+'-'+item[0][1] }}</template>
                                </a>
                            </TimePicker>
                        </Col>
                        <Col :xs="2">
                            <InputNumber v-model="item[1]" disabled></InputNumber>
                        </Col>
                        <Col :xs="2">
                            <InputNumber v-model="item[2]" disabled></InputNumber>
                        </Col>
                        <Col :xs="2">
                            <InputNumber v-model="item[3]" disabled></InputNumber>
                        </Col>
                        <Col :xs="2">
                            <InputNumber v-model="item[4]" disabled></InputNumber>
                        </Col>
                        <Col :xs="2">
                            <InputNumber v-model="item[5]" disabled></InputNumber>
                        </Col>
                        <Col :xs="2">
                            <InputNumber v-model="item[6]" disabled></InputNumber>
                        </Col>
                        <Col :xs="2">
                            <InputNumber v-model="item[7]" disabled></InputNumber>
                        </Col>
                    </Row>
                </Col>
            </Row>
            <Row class="bordered">
                <Col class="text-align-c borderRight" :xs="24" :md="3">
                    <b>预约期限</b>
                </Col>
                <Col class="padding-l" :xs="24" :md="21">{{info.term}}天</Col>
            </Row>
            <Row class="bordered">
                <Col class="text-align-c borderRight" :xs="24" :md="3">
                    <b>医事服务费</b>
                </Col>
                <Col class="padding-l" :xs="24" :md="21">{{info.fee}}元</Col>
            </Row>
            <Row class="bordered">
                <Col class="text-align-c borderRight" :xs="24" :md="3">
                    <b>患者什么时候、到哪里找您领取挂号</b>
                </Col>
                <Col class="padding-l" :xs="24" :md="21">{{info.receive}}</Col>
            </Row>
            <Row class="bordered">
                <Col class="text-align-c borderRight" :xs="24" :md="3">
                    <b>备注</b>
                </Col>
                <Col class="padding-l" :xs="24" :md="21">{{info.remarks}}</Col>
            </Row>
        </div>
        <div style="text-align:center;margin: 20px 0">
            <Button type="primary" @click="changeRegisterFlag">
                <i class = "iconfont icon-butongyi" v-if="icloseText == '关闭' " style="font-size:14px;margin-right:5px"></i>
                <Icon type="ios-checkmark" v-if="icloseText == '开启' " style="margin-right: 5px" />
                {{icloseText}}预约</Button>
            <Button type="primary" v-if="info.updateStatus !== 1" @click="toEdit">
                <i class = "iconfont icon-bianji" style="font-size:14px;margin-right:5px"></i>编辑</Button>
            <Button @click="reback">
                <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>返回
            </Button>
        </div>
    </div>
</template>
<script>
import api from "@/api/commonApi";
import tempHeader from "@/components/tmpHeader";
import { Avatar } from "view-design";
export default {
    data() {
        return {
            id: null,
            info: null,
            pageNo: null,
            searchKey: "",
            deptKey: "",
            dictType: "",
            province: null,
            city: null,
            area: null,
            hospital: null,
            isBack: 2,

            littleTitle: "查看",
            icloseText: "关闭",
            registerFlag: null,

            upList: [],
            dnList: []
        };
    },
    created() {
        this.id = this.$route.query.id;
        let query = this.$route.query
        this.pageNo = query.pageNo
            ? parseInt(query.pageNo)
            : 1;
        this.searchKey = query.searchKey
            ? query.searchKey
            : "";
        this.deptKey = query.deptKey
            ? query.deptKey
            : "";
        this.dictType = query.dictType
            ? query.dictType
            : "";
        this.province = query.province
            ? parseInt(query.province)
            : null;
        this.city = query.city
            ? parseInt(query.city)
            : null;
        this.area = query.area
            ? parseInt(query.area)
            : null;
        this.hospital = query.hospital
            ? parseInt(query.hospital)
            : null;
        this.status = query.status
            ? parseInt(query.status)
            : null;

                this.loadingDoctorPage()

        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/operation/doctorManagement/index",
                title: "医生运营管理"
            },
            {
                path: "/index/operation/register/list",
                title: "预约挂号排班"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    components: { Avatar, tempHeader },
    methods: {
        // 加载详细信息
        loadingDoctorPage() {
            this.$axios.post(api.findAppointmentById, { id: this.id, schedulingType: this.status }).then(resp => {
                this.info = resp.data.object;
                this.info.registerTimes.map((el, i) => {
                    if(el.hyDay == 1){
                        let tmpPiece = [el.timeStart, el.timeEnd];
                        if(this.upList.length<=0){
                            let tmpArr = [tmpPiece,"","","","","","",""];
                            tmpArr[el.hyWeek] = el.hyNum;
                            this.upList.push(tmpArr);
                        }else{
                            let pFlag = true;
                            let tmpIndex = null;
                            let tmpArr = [tmpPiece,"","","","","","",""];
                            this.upList.map((ele,i)=>{
                                if(ele[0].toString() === tmpPiece.toString()){
                                    pFlag = false;
                                    tmpIndex = i;
                                }
                            })
                            if(pFlag){
                                tmpArr[el.hyWeek] = el.hyNum;
                                this.upList.push(tmpArr);
                            }else{
                                this.upList[tmpIndex][el.hyWeek] = el.hyNum;
                            }
                        }
                    }else if(el.hyDay == 2){
                        let tmpPiece = [el.timeStart, el.timeEnd];
                        if(this.dnList.length<=0){
                            let tmpArr = [tmpPiece,"","","","","","",""];
                            tmpArr[el.hyWeek] = el.hyNum;
                            this.dnList.push(tmpArr);
                        }else{
                            let pFlag = true;
                            let tmpIndex = null;
                            let tmpArr = [tmpPiece,"","","","","","",""];
                            this.dnList.map((ele,i)=>{
                                if(ele[0].toString() === tmpPiece.toString()){
                                    pFlag = false;
                                    tmpIndex = i;
                                }
                            })
                            if(pFlag){
                                tmpArr[el.hyWeek] = el.hyNum;
                                this.dnList.push(tmpArr);
                            }else{
                                this.dnList[tmpIndex][el.hyWeek] = el.hyNum;
                            }
                        }
                    }
                });
                console.log(this.info);
                this.registerFlag = this.info.isClose;
                if (this.info.isClose == 1) {
                    this.icloseText = "开启";
                } else {
                    this.icloseText = "关闭";
                }
            })
            .catch(err => {
                // this.$Message.info("服务器超时，请重新访问")
            });
        },
        // 预约
        changeRegisterFlag() {
            if (this.registerFlag == 1) {
                this.registerFlag = 0;
            } else {
                this.registerFlag = 1;
            }

            this.$axios
                .post(api.updateStatus, {
                    id: this.id,
                    isClose: this.registerFlag,
                    fee : this.info.fee
                })
                .then(resp => {
                    if (resp.data.success) {
                        this.$Message.info(this.icloseText + "成功");
                    } else {
                        this.$Message.info(this.icloseText + "失败");
                    }
                    if (this.registerFlag == 1) {
                        this.icloseText = "开启";
                    } else {
                        this.icloseText = "关闭";
                    }
                })
                .catch(err => {
                    // this.$Message.info("服务器超时，请重新访问")
                });
        },
        // 编辑 
        toEdit() {
            //   公用方法
            this.functionJS.queryNavgationTo(
                this,
                "/index/doctorOperation/register/segmentationedit",
                {
                    id: this.id,
                    pageNo: this.pageNo,
                    province: this.province,
                    city: this.city,
                    area: this.area,
                    hospital: this.hospital,
                    isBack: 2,
                    searchType: this.searchType,
                    searchKey: this.searchKey,
                    deptKey: this.deptKey,
                    dictType: this.dictType,
                    status: this.status
                }
            );
        },
        // 返回
        reback() {
            //   公用方法
            this.functionJS.queryNavgationTo(
                this,
                "/index/doctorOperation/register/list",
                {
                    pageNo: this.pageNo,
                    province: this.province,
                    city: this.city,
                    area: this.area,
                    hospital: this.hospital,
                    isBack: 2,
                    searchKey: this.searchKey,
                    deptKey: this.deptKey,
                    dictType: this.dictType
                }
            );
        }
    }
};
</script>
<style lang="less" scoped>
.registeradd {
    padding: 10px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    .main{
        width: 98%;
        display: flex;
        flex-direction: column;
        margin: 10px auto;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 3px #ebedf8;
        border-radius: 5px;
        padding-bottom: 30px;
        .box{
            margin-left: 20px;
        }
        .title {
        font-size: 20px;
        padding-left: 15px;
        margin-bottom: 20px;
        color: #333;
        height: 40px;
        line-height: 40px;
        background: #ebedf8;         
        }
    }
    .padding-l {
        padding-left: 5px;
    }
    .padding-r {
        padding-right: 5px;
    }
    .padding-t {
        padding-top: 15px;
    }
    .padding-b {
        padding-bottom: 15px;
    }
    .borderRight {
        border-right: 1px solid #e5e5e5;
    }
    .borderLeft {
        border-left: 1px solid #e5e5e5;
    }
    .borderBottom {
        border-bottom: 1px solid #e5e5e5;
    }
    .borderTop {
        border-top: 1px solid #e5e5e5;
    }
    .w-select {
        width: 100px;
    }
    .w-input {
        width: 200px;
    }
    .req-icon {
        font-size: 18px;
        color: red;
        display: inline-block;
        height: 18px;
        width: 18px;
        text-align: center;
        line-height: 18px;
        vertical-align: middle;
    }
    .text-align-c {
        text-align: center;
        line-height: 32px;
    }
    .bordered {
        border: 1px solid #e5e5e5;
        margin: 0 20px;
    }
    b {
        font-weight: bold;
    }
    .expert-msg {
        color: #f00;
        display: none;
    }
    .show-msg {
        display: inline-block;
    }
    .cus-btn {
        vertical-align: middle;
        width: 30px;
        height: 30px;
        line-height: 30px;
        color: #ffffff;
        font-size: 30px;
        border: 0;
        border-radius: 50%;
        background: #5362e1;
        &:focus {
            border: 0;
            outline: none;
        }
    }
    b {
        font-weight: bold;
    }
}
</style>
<style lang="less">
.ivu-btn-ghost {
    display: none;
}
</style>